[ Mypage ] 내기록보기 selectOption query parameter로 받아오기 #357
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
현재 각 옵션값에 따라 각자 다른 페이지 역할의 성격을 가지고 있어서 저는 지금과 같은 케이스에서는 Query Parameter보다는 Path Variable로 사용하는 게 더 적합하다는 생각이 들어요.
<Route path="/mypage/history/:section" element={<History />} />이렇게 파라미터 열어두고
const { section } = useParams();
const sectionMap = {
'favorite': <MyFavoriteBookList />,
'mybook': <MyLecueBookList />,
'myletter': <MyLetterList />
};
// 컴포넌트 갈아끼우는 곳!!
{sectionMap[section]}이렇게 받아서 뿌려주면 좋을 것 같아요. 잘못된 경로에 요청하면 404가 뜰 거구요!!
{
title: '즐겨찾기한 레큐북',
variant: 'book',
image: <ImgMypageFavoriteLecueBook />,
handleClickTab: () => navigate('/mypage/history/favorite'),
},
{
title: '내가 만든 레큐북',
variant: 'book',
image: <ImgMypageMakeLecueBook />,
handleClickTab: () => navigate('/mypage/history/mybook),
},
{
title: '내가 남긴 레터',
variant: 'letter',
image: <ImgMypageLetter />,
handleClickTab: () => navigate('/mypage/history/myletter'),
},라우팅하는 곳은 이렇게 수정해주면 될 것 같습니다!!
더 좋은 의견 있으면 말씀해주세용🙌🏻
|
오..! 정우가 말한 방식은 사실 많이 시도해본 방식이 아니라 새롭게 다가오는데, 이론상 제안해준 것처럼 의도한 url이 아니라면 404에 걸리게 하는게 가장 좋은 것 같아요! 제가 이전에 생각했던 방식은 아래와 같이 현재 접속한 경로에서 받아온 쿼리 파라미터의 유효성을 검사하는 것이였어요! const isEnabledQuery = selectedOption === 1 || selectedOption === 2 || selectedOption === 3;
{ isEnabledQuery ? (
<React.Fragment>
<Header headerTitle="내 기록보기" />
<Header headerTitle="내 기록보기" handleFn={handleHeaderBackBtn}/>
<S.HistoryEnterPageBodyWrapper>
{HistoryEnterList.map((element) => {
return (
<S.Tab
variant={element.variant}
key={element.title}
onClick={element.handleClickTab}
>
<S.Text>{element.title}</S.Text>
{element.image}
</S.Tab>
);
})}
</S.HistoryEnterPageBodyWrapper>
</React.Fragment>
) : (
<ErrorPage />
)};하지만 레큐에는 에러바운더리 설정이 되어있기 때문에, 정우가 남겨준 Path Variable 방식을 사용하면 따로 유효성 검사를 하거나 에러 페이지를 렌더링하지 않아도 에러 처리가 된다는 측면에서 더 나은 것 같아요!! 추가적으로, 뒤로 가기를 처리하기 위해 헤더에 handleFn을 추가한 부분도 깔끔하고 괜찮은 방식이라고 생각합니당 ~~!! |
원래 저도 아름이가 달아준 것처럼 selectOption 값이 유효한지 검사해서 에러 페이지로 직접 라우팅 시키는 방법을 생각했었어요. 그치만 정우 말처럼 존재하지 않는 옵션 값이 들어간다면 접근할 수 없는 페이지이기 때문에 별도로 에러 페이지를 띄워주는 것보다 아예 404 error를 던져주는게 맞는 것 같아요. 물론 두가지 다 결과론적으로는 동일하지만 말이예요..! 그리고 기존에 query parameter로 라우팅을 할 땐 selectOption값이 1,2,3으로 알아보기 어렵다고 생각했는데 저렇게 각 페이지 별 이름을 지정해주는게 코드 가독성의 측면에서도 훨씬 좋을 것 같아요. 좋은 의견 고마워요! |
There was a problem hiding this comment.
@doyn511
지금 사전 정의된 3개의 case로 분리되는 게 너무 명확한 상황이니까 변수화해서 열어두지 말고, 존재하지 않는 경로에 접근하면 에러 처리를 하고 싶은 상황이니 nested routing으로 처리하는 게 가장 좋아보여요.
<Route path="history" element={<History />}>
<Route path="favorite" element={<MyFavoriteBookList />} />
<Route path="mybook" element={<MyLecueBookList />} />
<Route path="myletter" element={<MyLetterList />} />
</Route>이렇게 걸어주고
조건부 렌더링해야 하는 부분에 Outlet 위치시키면 될 것 같네요!!
...
<Oultet />
...이렇게 하면 존재하지 않는 경로에 접근하면 404로 Errorboundary에서 잡힐 것 같습니당!!
🔥 Related Issues
✅ 작업 내용
마이페이지 - 내 기록보기에서 useNavigate의 state로 전달하던 페이지 옵션을 query parameter로 전달하도록 수정했습니다.
📸 스크린샷 / GIF / Link
2025-01-14.03.02.31.mov
📌 이슈 사항
문제 발견 상황
2025-01-14.03.00.36.mov
[이전 코드]
[수정한 코드]
HistoryEnter컴포넌트에서 Query Parameter로 페이지의 option 값을 넘겨주고,History컴포넌트에서 useSearchParams()로 받아와 selectOption state로 업데이트 해서 사용하는 방법으로 수정했습니다.이 단계까지만 했을 때, 모달을 이용해 다른 컴포넌트를 보고자 한 상황에는 컴포넌트는 변경이 되지만 url은 변경이 되지 않는 상황이 발생했습니다.
따라서 모달로 컴포넌트를 변경해야하는 상황에서는 모달 내에서 선택된 Option의 값을 동일하게 담아 navigate 시켜주었습니다.
기존에 navigate의 state 값으로 컴포넌트를 변경했을 때와 다르게 현재는 url 자체가 변경되기 때문에 헤더의 뒤로가기 버튼을 눌렀을 때 사용자가 원하는 동작 (ex. 내가 작성한 레큐노트가 띄워진 페이지에서 뒤로가기를 누르면 내 기록보기 진입페이지가 뜨기를 원함 / 내 기록보기 진입페이지에서 뒤로가기 버튼을 눌렀을 때 마이페이지의 모든 메뉴가 뜨는 페이지
/mypage가 뜨기를 원함)을 하지 않아HistoryEnter.tsx와History.tsx페이지에 존재하는 헤더에 handleFn을 추가해주었습니다.✍ 궁금한 것
.. 마음껏 토론을 펼쳐봅시다 ..